<template>
<section>
    <div class="custorm--modelbox goodscol-edit">
        <renohome-right-nav :custormItemData="custormItemData" @rightNavChange="rightNavChange" showChange="1"></renohome-right-nav>
        <section v-if="nrActive">
            <div class="edit-form-item">
                <div class="form-label">选择商品</div>
                <el-radio-group v-model="custormItemData.params.choostype">
                    <el-radio label="1">手动选择</el-radio>
                    <el-radio label="2">选择分类</el-radio>
                    <!-- <el-radio label="3">选择分组</el-radio> -->
                </el-radio-group>
                <div v-if="custormItemData.params.choostype==1" class="inner">
                    <div class="goodscol-add" @click="uploadtoggle('chooseGoods')"><i class="el-icon-plus"></i> 添加</div>
                    <div class="flex-row choose-item-lits">
                        <div v-for="(item, index) in custormItemData.data" :key="index" class="choose-item-child" v-dragging="{ item: item, list: custormItemData.data, group: 'custormItemData.data'}">
                            <img :src="item.file_path" alt="" class="small">
                            <i class="delete el-icon-close" @click="delItemList({data:custormItemData.data,index})" style="font-size: 16px;"></i>
                        </div>
                    </div>
                </div>
                <section v-if="custormItemData.params.choostype==2">
                    <div class="inner flex-row flex-align-c">
                        <div style="margin:10px">分类</div>
                        <div class="select-btn-box" @click="uploadtoggle(['goods'])"><i class="icon icon-fujian select-btn-icon"></i>
                            <el-input class="my-link-input" readonly size="small" v-model="custormItemData.params.cateid.name" placeholder="请选择分类"></el-input>
                        </div>
                    </div>
                        <p style="font-size:12px;color:#999;">注：如果不选择将默认为全部分类</p>
                    <div class="form-label" style="margin-top: 20px;">显示条数</div>
                    <div class="flex-row flex-align-c">
                        <el-slider :show-tooltip="false" style="width: 70%;" v-model="listitemNum" input-size="mini" :max="20" :min="1">
                        </el-slider>
                        <div class="coupon-showslider">{{custormItemData.params.listitem}}个</div>
                    </div>
                </section>
            </div>
            <!-- 是否显示已售罄 -->
            <div class="edit-form-item">
                <div class="form-label">是否显示已售罄(只针对当前组件生效！)</div>
                <el-radio-group v-model="custormItemData.params.soldout">
                    <el-radio label="1">显示</el-radio>
                    <el-radio label="2">不显示</el-radio>
                </el-radio-group>
                <div style="font-size:12px;color:#999;margin-top:10px" v-if="custormItemData.params.choostype==2">注：售罄的商品自动靠后排序</div>
            </div>

            <div class="edit-form-item" v-if="custormItemData.params.choostype==2||custormItemData.params.choostype==3">
                <div class="form-label">商品排序</div>
                <!-- <el-radio-group v-model="custormItemData.params.sort" style="margin-bottom:12px;">
                    <el-radio label="1">千人千面</el-radio>
                    <el-radio label="2">自定义排序</el-radio>
                </el-radio-group> -->
                <!-- <div v-if="custormItemData.params.sort==1"><span style="color: #f1495c">*</span>根据会员特征千人千面展现，可大幅提升点击和成交转化率。</div> -->
                <div>
                    <el-select size="small" style="width:100%;" v-model="custormItemData.params.sortcustorm" placeholder="综合">
                        <!-- 商品排序选择以下选项，打开标题并且打开附近排序
                            custormItemData.params.sortcustorm='shelf_time' 时     显示最新  
                            custormItemData.params.sortcustorm='all' 时            显示综合
                            custormItemData.params.sortcustorm='shelf_time' 时     显示最热
                                                                等于其他的时依然显示最新  
                         -->
                        <el-option label="上架时间" value="shelf_time">
                        </el-option>
                        <el-option label="综合" value="all">
                        </el-option>
                        <el-option label="按销量" value="sales">
                        </el-option>
                        <el-option label="价格降序" value="desc_price">
                        </el-option>
                        <el-option label="价格升序" value="asc_price">
                        </el-option>
                        <el-option label="访问量" value="view_num">
                        </el-option>
                        <el-option label="成交转化率" value="pay_num">
                        </el-option>
                          <el-option label="最新" value="new_goods">
                        </el-option>
                    </el-select>
                </div>
            </div>

            <!-- <div class="edit-form-item" v-if="custormItemData.style.display != '3' && custormItemData.style.display != '4'"> -->
            <div class="edit-form-item" >
                <!-- v-if="custormItemData.style.display!='5'" -->
              <div v-if="custormItemData.style.display!='5'">
                    <div class="form-label" >购买按钮</div>
                        <el-radio-group v-model="custormItemData.style.buybtn" >
                            <el-radio label="1" @click.native="custormItemData.style.cart='2'">显示</el-radio>
                            <el-radio label="2">隐藏</el-radio>
                        </el-radio-group>
              </div>
                <div v-if="custormItemData.style.display!='5' && custormItemData.style.display!='1' && custormItemData.style.display!='2' && custormItemData.style.display!='3'&& custormItemData.style.display!='4'&& custormItemData.style.display!='1-3'&& custormItemData.style.display!='1-2'&& custormItemData.style.display!='5'">
                        <div class="form-label" style="margin-top:20px;" >是否显示购物车按钮</div>
                            <el-radio-group v-model="custormItemData.style.cart" >
                                <el-radio label="1" @click.native="custormItemData.style.buybtn='2'">是</el-radio>
                                <el-radio label="2">否</el-radio>
                            </el-radio-group>
                </div>

                <!-- <div v-if="custormItemData.style.buybtn==1" class="stylebox flex-row flex-align-c">
                    <span>样式</span>
                    <div class="txbox" @click="changeStyle(1)" v-bind:class="{active:custormItemData.style.buybtnstyle==1}">
                        <div class="cft"></div>
                    </div>
                    <div class="txbox" @click="changeStyle(2)" v-bind:class="{active:custormItemData.style.buybtnstyle==2}">
                        <div class="yuan"></div>
                    </div>
                    <div class="txbox" @click="changeStyle(3)" v-bind:class="{active:custormItemData.style.buybtnstyle==3}">
                        <div class="zft"></div>
                    </div>
                </div> -->
                <div v-if="custormItemData.style.buybtn==1 && custormItemData.style.display!='5'" class="stylebox flex-row flex-align-c">
                    <span style="margin-right:13px;">文字</span>
                    <el-input v-model="custormItemData.style.btntext" :maxlength="4" size="mini">
                        <i slot="suffix" style="line-height: 28px;">{{custormItemData.style.btntext.length}}/4</i>
                    </el-input>
                </div>
                <div class="form-label" style="margin-top:20px;" >是否显示分销商佣金</div>
                <!-- charges -->
                <el-radio-group v-model="custormItemData.style.charges" >
                    <el-radio label="1">是</el-radio>
                    <el-radio label="2">否</el-radio>
                </el-radio-group>
                 <div v-if="custormItemData.style.charges==1" class="stylebox flex-row flex-align-c">
                    <span style="margin-right:13px;">文字</span>
                    <el-input v-model="custormItemData.style.commission" :maxlength="1" size="mini">
                    </el-input>
                </div>
            </div>
            <div class="edit-form-item" v-if="custormItemData.style.display == '1-1'">
                <div class="form-label">活动标题</div>
                <div class="stylebox flex-row flex-align-c">
                    <span style="margin-right:13px;">主标题</span>
                    <el-input v-model="custormItemData.style.title" size="mini">
                        <!-- <i slot="suffix" style="line-height: 28px;">{{custormItemData.style.btntext.length}}/n</i> -->
                    </el-input>
                </div>
                <div class="stylebox flex-row flex-align-c">
                    <span style="margin-right:13px;">副标题</span>
                    <el-input v-model="custormItemData.style.subtitle" size="mini">
                        <!-- <i slot="suffix" style="line-height: 28px;">{{custormItemData.style.btntext.length}}/n</i> -->
                    </el-input>
                </div>
            </div>

            <div class="edit-form-item">
                <div class="form-label">标签</div>
                <el-radio-group v-model="custormItemData.style.icon">
                    <el-radio label="2">显示</el-radio>
                    <el-radio label="1">不显示</el-radio>
                </el-radio-group>
                <div v-if="custormItemData.style.icon==2" class="stylebox flex-row flex-align-c">
                    <span style="margin-right:13px;">文字</span>
                    <el-input v-if="(custormItemData.style.display == 1 || custormItemData.style.display == '1-1')" v-model="custormItemData.style.icontext" :maxlength="4" size="mini">
                        <i slot="suffix" style="line-height: 28px;">{{custormItemData.style.icontext.length}}/4</i>
                    </el-input>
                    <el-input v-else v-model="custormItemData.style.icontext" :maxlength="2" size="mini">
                        <i slot="suffix" style="line-height: 28px;">{{custormItemData.style.icontext.length}}/2</i>
                    </el-input>
                </div>
            </div>

            <!-- <div class="edit-form-item" v-if="custormItemData.style.display=='1' || custormItemData.style.display=='1-1'">
          <div class="form-label">参与用户</div>
          <el-radio-group v-model="custormItemData.style.user">
            <el-radio label="1">显示</el-radio>
            <el-radio label="2">不显示</el-radio>
          </el-radio-group>
        </div> -->

            <div class="edit-form-item" v-if="custormItemData.style.display=='1-1'">
                <div class="form-label">上下边距</div>
                <div class="flex-row flex-align-c">
                    <el-slider :show-tooltip="false" style="width: 70%;" v-model="margincol" input-size="mini" :max="30">
                    </el-slider>
                    <div class="coupon-showslider">{{custormItemData.style.margincol}}px</div>
                </div>
                <div class="form-label">左右边距</div>
                <div class="flex-row flex-align-c">
                    <el-slider :show-tooltip="false" style="width: 70%;" v-model="marginrow" input-size="mini" :max="30">
                    </el-slider>
                    <div class="coupon-showslider">{{custormItemData.style.marginrow}}px</div>
                </div>
            </div>

            <div class="edit-form-item" v-if="custormItemData.style.display != '2' && custormItemData.style.display != '5'">
                <div class="form-label">商品原价显示</div>
                <el-radio-group v-model="custormItemData.style.line_price">
                    <el-radio label="2">显示</el-radio>
                    <el-radio label="1">不显示</el-radio>
                </el-radio-group>
            </div>
            <div class="edit-form-item" v-if="custormItemData.style.display != '2' && custormItemData.style.display != '5'" >
                <div class="form-label">销量显示</div>
                <el-radio-group v-model="custormItemData.style.goods_sales">
                    <el-radio label="2">显示</el-radio>
                    <el-radio label="1">不显示</el-radio>
                </el-radio-group>
            </div>
        </section>

        <section v-if="fgActive">
            <div class="es-form-item goods" style="border-bottom: 0px;">
                <div class="item-inner block" style="transform: scale(0.8) translate(-50px, -50px); width: 375px;"><label class="button-img block" @click="changePattern(1)" v-bind:class="{active:custormItemData.style.display==1}" style="border-color: rgb(237, 237, 237);">
                        <span style="color:#999;font-size: 16px;margin-left: 20px;">单列卡片风格</span>
                        <div class="es-goods-group block one">
                            <div class="es-goods-item">
                                <div data-text="推荐" class="image ">
                                    <div class="qglist-i-t-bar">
                                        <div class="qglist-i-t-bar-d">
                                                    <!-- <div class="qglist-i-t-bar-l">
                                <svg-icon icon-class="flame" style="margin-right:5px;" />参与<div class="em"></div>
                                </div>
                                <div class="qglist-i-t-bar-r">

                                </div> -->
                                        </div>
                                    </div><img height="140" :src="getPath('default_picture.png')" alt="">
                                </div>
                                <div class="detail">
                                    <div class="name line-hide display-1" style="margin-bottom:10px;"><i class="icon-tip">推荐</i>这里是商品标题</div>
                                    <div style="display: flex;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price display-1 flex-row flex-align-c flex-justify-b"><span class="text">￥<span>20.00</span></span><span class="buy buybtn1 display-1">
                                                    购买
                                                </span></div>
                                            <div class="sold display-1 flex-row flex-align-c flex-justify-b" style="margin-top: 5px;"><span class="line-through">￥0.00</span><span>0人购买</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </label></div>

                <div class="item-inner block" style="transform: scale(0.8) translate(-50px, -130px); width: 375px;"><label class="button-img block" @click="changePattern('1-1')" v-bind:class="{active:custormItemData.style.display=='1-1'}" style="border-color: rgb(237, 237, 237);">
                         <span style="color:#999;font-size: 16px;margin-left: 20px;">单列卡片轮播风格</span>
                        <div class="es-goods-group block one">
                            <div class="es-goods-header flex-row flex-align-c flex-justify-b">
                                <div class="flex-col">
                                    <span class="title">这里是主标题</span>
                                    <span class="sub-title">这里是副标题</span>
                                </div>
                                <p class="count-num">2/5</p>
                            </div>
                            <div class="es-goods-item">
                                <div data-text="推荐" class="image ">
                                    <div class="qglist-i-t-bar">
                                        <div class="qglist-i-t-bar-d">
                                        </div>
                                    </div><img height="140" :src="getPath('default_picture.png')" alt="">
                                </div>
                                <div class="detail">
                                    <div class="name line-hide display-1" style="margin-bottom:10px;"><i class="icon-tip">推荐</i>这里是商品标题</div>
                                    <div style="display: flex;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price display-1 flex-row flex-align-c flex-justify-b"><span class="text">￥<span>20.00</span></span><span class="buy buybtn1 display-1">
                                                    购买
                                                </span></div>
                                            <div class="sold display-1 flex-row flex-align-c flex-justify-b" style="margin-top: 5px;"><span class="line-through">￥0.00</span><span>0人购买</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </label></div>

                <div class="item-inner block" style="transform: scale(0.8) translate(-50px, -193px); width: 375px;"><label class="button-img block" @click="changePattern(2)" v-bind:class="{active:custormItemData.style.display==2}" style="border-color: rgb(237, 237, 237);">
                        <span style="color:#999;font-size: 16px;margin-left: 20px;">单列风格</span>
                        <div class="es-goods-group  list">
                            <div class="es-goods-item">
                                <div data-text="推荐" class="image display-2"><img :src="getPath('default_picture.png')" alt=""></div>
                                <div class="detail">
                                    <div class="name line-hide">这里是商品标题</div>
                                    <div style="display: flex;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="margin-top: 4px;"><span class="text">￥<span>20.00</span></span> <span class="productprice">￥99.00</span></div>
                                        </div> <span class="buy buybtn1 display-2">
                                            购买
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </label></div>

                <div class="item-inner block " style="transform: scale(0.8) translate(-50px, -250px); width: 375px;"><label class="button-img block" @click="changePattern(3)" v-bind:class="{active:custormItemData.style.display==3}" style="border-color: rgb(237, 237, 237);">
                       <span style="color:#999;font-size: 16px;margin-left: 20px;">两列正方形风格</span>
                        <div class="es-goods-group block two">
                            <div class="es-goods-item" style="margin-top:20px;">
                                <div data-text="推荐" class="image display-3"><img :src="getPath('default_picture.png')" alt=""></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="es-goods-item" style="margin-top:20px;">
                                <div data-text="推荐" class="image display-3"><img :src="getPath('default_picture.png')" alt=""></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </label></div>

                <div class="item-inner block " style="transform: scale(0.8) translate(-50px, -320px); width: 375px;"><label class="button-img block" @click="changePattern(4)" v-bind:class="{active:custormItemData.style.display==4}" style="border-color: rgb(237, 237, 237); overflow: hidden;">
                      <span style="color:#999;font-size: 16px;margin-left: 20px;">三列正方形轮播风格</span>

                         <div class="es-goods-group block two swiper">
                            <div class="es-goods-item" style="margin-top:20px;">
                                <div data-text="推荐" class="image display-3"><img :src="getPath('default_picture.png')" alt=""></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="es-goods-item" style="margin-top:20px;">
                                <div data-text="推荐" class="image display-3"><img :src="getPath('default_picture.png')" alt=""></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="es-goods-item" style="margin-top:20px;">
                                <div data-text="推荐" class="image display-3"><img :src="getPath('default_picture.png')" alt=""></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </label></div>

                <div class="item-inner block " style="transform: scale(0.8) translate(-50px, -380px); width: 375px;"><label class="button-img block" @click="changePattern('1-3')" v-bind:class="{active:custormItemData.style.display=='1-3'}" style="border-color: rgb(237, 237, 237); overflow: hidden;">
                       <span style="color:#999;font-size: 16px;margin-left: 20px;">三列长方形轮播风格</span>
                        <div class="es-goods-group block two swiper">
                            <div class="es-goods-item" style="margin-top:20px;">
                                <div data-text="推荐" class="image display-5"><img :src="getPath('default_picture.png')" alt=""></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="es-goods-item" style="margin-top:20px;">
                                <div data-text="推荐" class="image display-5"><img :src="getPath('default_picture.png')" alt=""></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="es-goods-item" style="margin-top:20px;">
                                <div data-text="推荐" class="image display-5"><img :src="getPath('default_picture.png')" alt=""></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </label></div>

                <div class="item-inner block " style="transform: scale(0.8) translate(-50px, -435px); width: 375px;"><label class="button-img block" @click="changePattern('1-2')" v-bind:class="{active:custormItemData.style.display=='1-2'}" style="border-color: rgb(237, 237, 237);">
                         <span style="color:#999;font-size: 16px;margin-left: 20px;">两列长方形风格</span>
                       <div class="es-goods-group block two">
                            <div class="es-goods-item" style="margin-top:20px;">
                                <div data-text="推荐" class="image display-5"><img :src="getPath('default_picture.png')" alt=""></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="es-goods-item" style="margin-top:20px;">
                                <div data-text="推荐" class="image display-5"><img :src="getPath('default_picture.png')" alt=""></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </label></div>

                <div class="item-inner block " style="transform: scale(0.8) translate(-50px, -490px); width: 375px;"><label class="button-img block" @click="changePattern(5)" v-bind:class="{active:custormItemData.style.display=='5'}" style="border-color: rgb(237, 237, 237);">
                      <span style="color:#999;font-size: 16px;margin-left: 20px;">三列正方形风格</span>
                        <div class="es-goods-group block two">
                            <div class="es-goods-items" style="margin-top:20px;">
                                <div data-text="推荐" class="image"><img :src="getPath('default_picture.png')" alt="" style="border-radius: 10px;"></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text" style="color:#ff5555">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             <div class="es-goods-items" style="margin-top:20px;">
                                <div data-text="推荐" class="image display-5"><img :src="getPath('default_picture.png')" alt="" style="border-radius: 10px;"></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text" style="color:#ff5555">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             <div class="es-goods-items" style="margin-top:20px;">
                                <div data-text="推荐" class="image display-5"><img :src="getPath('default_picture.png')" alt="" style="border-radius: 10px;"></div>
                                <div class="detail">
                                    <div class="name line-hide">请选择商品...</div>
                                    <div style="display: flex; margin-top: 10px;">
                                        <div style="flex: 1 1 0%;">
                                            <div class="price" style="line-height: 1;"><span class="text" style="color:#ff5555">0.00元</span></div>
                                            <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                                <span class="line-through">0.00</span>
                                                <span>已售</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </label></div>
            </div>
        </section>
        <section v-if="tiActive">
            <div class="edit-form-item">
                <div class="form-label">标题设置</div>
                <el-radio-group v-model="custormItemData.params.goodstitle">
                    <el-radio label="1">开启</el-radio>
                    <el-radio label="2" v-if="custormItemData.style.display!='5'">关闭</el-radio>
                </el-radio-group>
            </div>
              <div v-if="custormItemData.params.goodstitle=='1'">
                  <div class="edit-form-item">
                    <div class="form-label">标题样式</div>
                        <el-radio-group v-model="custormItemData.params.titlestyle">
                            <el-radio label="1">样式一</el-radio>
                            <el-radio label="2">样式二</el-radio>
                            <el-radio label="3" v-if="custormItemData.style.display!='5'">样式三</el-radio>
                        </el-radio-group>
                        <div style="margin-top:10px;" v-if="custormItemData.params.titlestyle=='3'">注：使用样式三时建议开启背景图和查看更多</div>
                </div>
                <div class="edit-form-item" v-if="custormItemData.params.titlestyle !='3' ">
                    <div class="form-label">主标题</div>
                        <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">颜色</span>
                            <el-color-picker class="ivu-input" v-model="custormItemData.style.maincolor" size="mini"></el-color-picker>
                            <span class="ivu-input">{{custormItemData.style.maincolor}}</span>
                        </div>
                        <div class="stylebox flex-row flex-align-c"><span style="margin-right:13px;">文字</span>
                            <el-input v-model="custormItemData.params.maintext" size="small">
                            </el-input>
                        </div>
                    </div>
                <div class="edit-form-item" v-if="custormItemData.params.titlestyle =='1'">
                    <div class="form-label">副标题</div>
                    <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">颜色</span>
                        <el-color-picker class="ivu-input" v-model="custormItemData.style.subcolor" size="mini"></el-color-picker>
                        <span class="ivu-input">{{custormItemData.style.subcolor}}</span>
                    </div>
                    <div class="stylebox flex-row flex-align-c"><span style="margin-right:13px;">文字</span>
                        <el-input v-model="custormItemData.params.subtext" size="small">
                        <!-- <i slot="suffix" style="line-height: 32px;">
                            {{custormItemData.params.subtext.length}}/8</i> -->
                        </el-input>
                    </div>
                </div>
                <!-- 模式三 -->
                <div v-if="custormItemData.params.titlestyle=='3'">
                    <div class="edit-form-item">
                            <div class="form-label">背景图</div>
                            <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">显隐</span>
                                <el-radio-group v-model="custormItemData.params.advertisement" class="flex-row mar-15" @change="paramsbtn">
                                    <el-radio label="1">开启</el-radio>
                                    <el-radio label="2" >关闭</el-radio>
                                </el-radio-group>
                            </div>
                            <div>
                                <div v-if="custormItemData.params.advertisement=='1'">
                                    <div style="margin-top:20px;" class="stylebox flex-row flex-align-c">
                                            <span style="margin-right:13px;">图片</span>
                                            <div class="uploadSource solid"><i
                                                class="delete ivu-icon iconfont icon-input_clear"
                                                style="font-size: 16px;"
                                                ></i>
                                                <div
                                                    class="img"
                                                    @click="uploadtoggless('image')"
                                                    :style="{'background-image':`url(${getPath(custormItemData.params.thumb.file_path)})`,
                                                    'height':'50px','width':'50px','background-repeat':'no-repeat','background-size':'cover','background-position':'50%'}"></div>
                                            </div>
                                        </div>
                                        <div style="margin-top:20px;" class="stylebox flex-row flex-align-c">
                                            <span style="margin-right:13px;">链接</span>
                                            <div class="readonly-div" @click="uploadtoggles('share')">
                                            <div class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type">
                                                <input
                                                autocomplete="off"
                                                spellcheck="false"
                                                type="text"
                                                placeholder="请选择链接"
                                                readonly="readonly"
                                                class="ivu-input ivu-input-default"
                                                :value="typeof custormItemData.params.adverlink === 'string' ? custormItemData.params.adverlink : custormItemData.params.adverlink.path">
                                            </div> <i class="icon icon-fujian readonly-icon" style="left: 12px;margin-top:-3px;"></i>
                                            </div>
                                        </div>
                                        <div v-if="custormItemData.params.titlestyle=='3' && custormItemData.style.display !='5'">
                                        <div>注：建议尺寸690x150</div>
                                    </div>
                                      <div v-else>
                                        <div>注：建议尺寸340x150</div>
                                    </div>
                                </div>

                     </div>
                 </div>
                </div>
                <!-- v-if="custormItemData.params.titlestyle==3 && custormItemData.params.display==5" -->
                 <!-- <div class="edit-form-item" v-if="custormItemData.style.display !='5' && custormItemData.params.advertisement=='1'"> -->

                 <div class="edit-form-item" v-if="custormItemData.style.display !='5'">
                     <div style="display:flex;justify-content:space-between;">
                         <div class="form-label">附近排序</div>
                          <el-switch active-value="1" inactive-value="2" v-model="custormItemData.params.newest" @change="newest" :disabled="custormItemData.params.showmore=='1'?true:false"></el-switch>
                     </div>
                     <div>注：开启附近后，查看更多将无法展示</div>
                      <div v-if="custormItemData.params.newest==1">
                           <el-radio-group v-model="custormItemData.params.prior" class="flex-row mar-15">
                                    <el-radio label="1" v-if="custormItemData.params.sortcustorm=='shelf_time'">最新在前</el-radio>
                                    <el-radio label="2" v-if="custormItemData.params.sortcustorm=='shelf_time'">最新在后</el-radio>

                                    <el-radio label="1" v-if="custormItemData.params.sortcustorm=='all'">综合在前</el-radio>
                                    <el-radio label="2" v-if="custormItemData.params.sortcustorm=='all'">综合在后</el-radio>

                                    <el-radio label="1" v-if="custormItemData.params.sortcustorm=='sales'">最热在前</el-radio>
                                    <el-radio label="2" v-if="custormItemData.params.sortcustorm=='sales'">最热在后</el-radio>
                                    
                                     <el-radio label="1" v-if="custormItemData.params.sortcustorm=='desc_price'">最新在前</el-radio>
                                    <el-radio label="2" v-if="custormItemData.params.sortcustorm=='desc_price'">最新在后</el-radio>
                                     <el-radio label="1" v-if="custormItemData.params.sortcustorm=='asc_price'">最新在前</el-radio>
                                    <el-radio label="2" v-if="custormItemData.params.sortcustorm=='asc_price'">最新在后</el-radio>
                                     <el-radio label="1" v-if="custormItemData.params.sortcustorm=='view_num'">最新在前</el-radio>
                                    <el-radio label="2" v-if="custormItemData.params.sortcustorm=='view_num'">最新在后</el-radio>
                                     <el-radio label="1" v-if="custormItemData.params.sortcustorm=='pay_num'">最新在前</el-radio>
                                    <el-radio label="2" v-if="custormItemData.params.sortcustorm=='pay_num'">最新在后</el-radio>
                                </el-radio-group>
                      </div>

                      <div v-if="custormItemData.params.titlestyle=='3'&& custormItemData.params.newest=='1'">
                          <div>
                         <div class="form-label" style="margin-top:20px;">字体颜色</div>
                         <div class="flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">选中颜色</span>
                            <el-color-picker class="ivu-input" v-model="custormItemData.style.selectcolor" size="mini"></el-color-picker>
                            <span class="ivu-input">{{custormItemData.style.selectcolor}}</span>
                        </div>
                         <div class="flex-row flex-align-c ivu-color-picker" ><span style="margin-right:13px;">未选中颜色</span>
                            <el-color-picker class="ivu-input" v-model="custormItemData.style.unselectcolor" size="mini"></el-color-picker>
                            <span class="ivu-input">{{custormItemData.style.unselectcolor}}</span>
                        </div>
                    </div>
                     <div >
                         <div class="form-label" style="margin-top:20px;">背景颜色</div>
                         <div class="flex-row flex-align-c ivu-color-picker" ><span style="margin-right:13px;">选中颜色</span>
                            <el-color-picker class="ivu-input" v-model="custormItemData.style.backgcolor" size="mini"></el-color-picker>
                            <span class="ivu-input">{{custormItemData.style.backgcolor}}</span>
                        </div>
                         <div class="flex-row flex-align-c ivu-color-picker" ><span style="margin-right:13px;">未选中颜色</span>
                            <el-color-picker class="ivu-input" v-model="custormItemData.style.unbackgcolor" size="mini"></el-color-picker>
                            <span class="ivu-input">{{custormItemData.style.unbackgcolor}}</span>
                        </div>
                    </div>
                     </div>

                 </div>

                <div class="edit-form-item">
                    <div class="form-label">查看更多</div>
                    <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">显隐</span>
                        <el-radio-group v-model="custormItemData.params.showmore" class="flex-row mar-15" @change="showmorebtn" >
                        <el-radio label="1" :disabled="custormItemData.params.newest=='1'?true:false">显示</el-radio>
                        <el-radio label="2" >隐藏</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="stylebox flex-row flex-align-c ivu-color-picker" v-if="custormItemData.params.showmore == 1"><span style="margin-right:13px;">颜色</span>
                        <el-color-picker class="ivu-input" v-model="custormItemData.style.morecolor" size="mini"></el-color-picker>
                        <span class="ivu-input">{{custormItemData.style.morecolor}}</span>
                    </div>
                    <div class="stylebox flex-row flex-align-c" v-if="custormItemData.params.showmore == 1"><span style="margin-right:13px;">链接</span>
                        <div class="readonly-div" @click="uploadtoggles('ChooseLink','showmore')">
                        <div class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type">
                            <input
                        autocomplete="off"
                        spellcheck="false"
                        type="text"
                        placeholder="请选择链接"
                        readonly="readonly"
                        class="ivu-input ivu-input-default"
                            :value="typeof custormItemData.params.link === 'string' ? custormItemData.params.link : custormItemData.params.link.path">
                        </div> <i class="icon icon-fujian readonly-icon" style="left: 12px;margin-top:-3px;"></i>
                        </div>
                    </div>
                </div>
                 <div class="edit-form-item" v-if="custormItemData.params.titlestyle !='3'">
                    <div class="form-label">广告位</div>
                     <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">显隐</span>
                        <el-radio-group v-model="custormItemData.params.advertisement" class="flex-row mar-15">
                        <el-radio label="1">开启</el-radio>
                        <el-radio label="2" >关闭</el-radio>
                        </el-radio-group>
                    </div>
                     <div v-if="custormItemData.params.advertisement=='1'">
                    <div style="margin-top:20px;" class="stylebox flex-row flex-align-c" >
                        <span style="margin-right:13px;">图片</span>
                        <div class="uploadSource solid"><i
                            class="delete ivu-icon iconfont icon-input_clear"
                            style="font-size: 16px;"
                            ></i>
                            <div
                                class="img"
                                @click="uploadtoggless('image')"
                                :style="{'background-image':`url(${getPath(!!custormItemData.params.thumb? custormItemData.params.thumb.file_path :'default_picture.png')})`,
                                'height':'50px','width':'50px','background-repeat':'no-repeat','background-size':'cover','background-position':'50%'}"></div>
                        </div>
                    </div>
                    <div style="margin-top:20px;" class="stylebox flex-row flex-align-c">
                        <span style="margin-right:13px;">链接</span>
                          <div class="readonly-div" @click="uploadtoggles('share')">
                        <div class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type">
                            <input
                            autocomplete="off"
                            spellcheck="false"
                            type="text"
                            placeholder="请选择链接"
                            readonly="readonly"
                            class="ivu-input ivu-input-default"
                            :value="typeof custormItemData.params.adverlink === 'string' ? custormItemData.params.adverlink : custormItemData.params.adverlink.path">
                        </div> <i class="icon icon-fujian readonly-icon" style="left: 12px;margin-top:-3px;"></i>
                        </div>
                    </div>
                     <div v-if=" custormItemData.style.display=='5' && custormItemData.params.advertisement=='1' && (custormItemData.params.titlestyle=='1' || custormItemData.params.titlestyle=='2')">
                            <div>注：建议尺寸750x300</div>
                        </div>
                        <div v-else>
                            <div>注：建议尺寸690x300</div>
                        </div>
                     </div>
                 </div>
              </div>

        </section>
    </div>
</section>
</template>

<script>
import Vue from 'vue'
import defaultConfig from './utils/editConfig'
import VueDND from 'awe-dnd'
Vue.use(VueDND)
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  data() {
    return {
      tiActive: false,
      pathCurrent: -1
    }
  },
  components: {

  },
  watch: {

  },
  computed: {
    listitemNum: {
      set(value) {
        this.custormItemData.params.listitem = value
      },
      get() {
        return this.conversionType('number', this.custormItemData.params.listitem)
      }
    },
    margincol: {
      set(value) {
        this.custormItemData.style.margincol = value
      },
      get() {
        return this.conversionType('number', this.custormItemData.style.margincol)
      }
    },
    marginrow: {
      set(value) {
        this.custormItemData.style.marginrow = value
      },
      get() {
        return this.conversionType('number', this.custormItemData.style.marginrow)
      }
    }
  },
  mounted() {

  },
  methods: {
    // uploadFileCallBack(files) {
    //   const { displayData, key } = files
    //   console.log(files)
    //   if (Array.isArray(displayData) && displayData.length > 0 && key === 'ChooseGoods') {
    //     const result = [...this.custormItemData.data]
    //     displayData.map(item => {
    //       const { image: [{ file_path }], goods_name, goods_id, sku: [{ goods_price = 0, line_price = 0, goods_sales = 0 }] } = item
    //       console.log(item, '=========================item')
    //       result.push({ file_path, goods_id, goods_price, line_price, goods_sales, goods_name })
    //     })

    //     this.$set(this.custormItemData, 'data', result)
    //   } else {
    //     this.custormItemData.params.cateid = displayData[0]
    //   }
    // },
    uploadFileCallBack(files) {
      const { displayData, key } = files
      if (Array.isArray(displayData) && displayData.length > 0 && key === 'ChooseGoods') {
        const result = [...this.custormItemData.data]
        displayData.map(item => {
          const { image: [{ file_path }], goods_name, goods_id, sku: [{ goods_price = 0, line_price = 0, goods_sales = 0 }] } = item
          console.log('ddddddddddddd++++++++++++++', item)
          result.push({ file_path, goods_id, goods_price, line_price, goods_sales, goods_name })
        })
        this.$set(this.custormItemData, 'data', result)
      } else if (key === 'ChooseLink') {
        const { currentRow: [file_path], displayData: [custorm] } = files
        if (this.linkModel === 'share') {
          this.custormItemData.params.adverlink = file_path
          if (file_path) {
            this.custormItemData.params.adverlink = file_path
          } else {
            if (custorm) {
              this.custormItemData.params.adverlink = custorm
            }
          }
        } else {
          if (file_path) {
            this.custormItemData.params.link = file_path
          } else {
            if (custorm) {
              this.custormItemData.params.link = custorm
            } else {
              this.$message.error('请选择链接~!')
            }
          }
        }
      } else {
        if (key === 'ChooseCategories') {
          this.custormItemData.params.cateid = displayData[0]
        }
        if (key === 'ChooseFiles') {
          const { displayData: [file_path] } = files
          this.custormItemData.params.thumb = file_path
        }
      }
    },
    uploadtoggle(type) {
      console.log('66666666666++++++++++++333333333', this.custormItemData.style.display == '1-1')
      if (this.custormItemData.style.display == '1-1' && this.custormItemData.data.length > 4) {
        return this.$message({
          type: 'error',
          message: `添加失败，此组件最多添加5个~!`
        })
      }
      this.output({ type, params: { editKey: this.custormItemData.key, goodsType: 'sale_hasSale' } })
    },
    uploadtoggles(mode = 'data') {
      this.linkModel = mode
      this.output({ type: 'link', params: { editKey: this.custormItemData.key } })
    },
    uploadtoggless(image) {
      this.output({ type: 'image', params: { editKey: this.custormItemData.key } })
    },
    chooseUrl(url, serveritem) {
      if (this.pathCurrent !== -1) {
        if (serveritem) {
          console.log(serveritem)
          this.custormItemData.params.chooseItemList.push(serveritem)
        } else {
          this.custormItemData.params[this.pathCurrent] = url
        }
      } else {
        this.$message.error('选择失败，请重试')
      }
    },
    changeStyle(e) {
      this.$nextTick(() => {
        this.custormItemData.style.buybtnstyle = e
      })
    },
    changePattern(e) {
      console.log('9999999999999999999999999999', e)
      //   console.log('9999999999999999999999999999', this.custormItemData.style.display == '1-1')
      this.$nextTick(() => {
        this.custormItemData.style.icontext = '推荐'
        this.custormItemData.style.display = e
        if (e == '5') {
          this.custormItemData.params.goodstitle = '1'
        }
        // if(e=='1-1' && this.custormItemData.data.length>4){
        //     return this.$message({
        //       type: 'error',
        //       message: `添加失败，此组件最多添加4个~!`
        //     })
        //     console.log("+++++++++++666666666666",this.custormItemData.data)
        // }
      })
    },
    paramsbtn(val) {
      // 如果背景图关闭，将附近排序、查看更多设置为2
      if (val == 2) {
        this.$nextTick(() => {
          this.custormItemData.params.showmore = '2' // 查看更多
          this.custormItemData.params.newest = '2'// 附近排序
        })
      }
    },
    newest() {
      if (this.custormItemData.params.newest == '1') {
        this.custormItemData.params.showmore = '2'
      }
    },
    showmorebtn() {
      if (this.custormItemData.params.showmore == '1') {
        this.custormItemData.params.newest = '2'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.goodscol-edit {
    .readonly-div {
    position: relative;
    flex-grow: 1;
  }
  .img {
        height: 18px;
        width: 18px;
        display: inline-block !important;
        vertical-align: middle;
        margin-right: 6px;
    }
  .readonly-div .readonly input {
    background: #e8effc;
    border: 0;
    padding-left: 18px;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    height: 32px;
    line-height: 1.5;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 4px;
  }
    .ivu-input-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;
    line-height: normal;
  }
    .line-through {
        text-decoration: line-through;
    }

    .edit-form-item {
        border-bottom: 5px solid #f6f7f9;
        padding: 20px 23px;
        font-size: 12px;
    }

    .edit-form-item:last-child {
        border-bottom: 0;
    }

    .el-radio__label {
        font-size: 12px;
    }

    .el-checkbox__label {
        font-size: 12px;
    }

    .form-label {
        line-height: 1;
        color: #47565d;
        font-weight: bolder;
        margin-bottom: 20px !important;
    }

    .inner {
        margin-top: 5px;
        margin-top: 12px;
        white-space: nowrap;
    }

    .goodscol-add {
        border: 1px solid #6b7685;
        line-height: 32px;
        height: 32px;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
    }

    // .stylebox {
    //     background: #f6f7f9;
    //     padding: 10px 20px;
    //     border: 1px solid #eee;
    //     color: #999;
    //     margin-top: 30px;
    //     white-space: nowrap;
    // }

    .txbox {
        border-radius: 3px;
        border: 1px solid transparent;
        margin: 0 15px 0 13px;
        padding: 5px;
        cursor: pointer;
    }

    .txbox.active {
        border-color: #409eff;
    }

    .zft {
        background: #dcdcdc;
        height: 15px;
        width: 15px;
        border-radius: 3px;
    }

    .cft {
        background: #dcdcdc;
        height: 15px;
        width: 25px;
        border-radius: 3px;
    }

    .yuan {
        background: #dcdcdc;
        height: 15px;
        width: 15px;
        border-radius: 15px;
    }

    .select-btn-box {
        background: #e8effc;
        cursor: pointer;
        border-radius: 5px;
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        width: 60%;
    }

    .select-btn-icon {
        line-height: 32px;
        float: left;
    }

    .select-btn-text {
        line-height: 32px;
        display: inline-block;
        height: 32px;
        vertical-align: middle;
    }

    .el-slider__input {
        width: 105px;
    }

    .el-slider__runway.show-input {
        margin-right: 130px;
    }

    //风格
    .es-form-item:last-child {
        border-bottom: 0;
    }

    .es-form-item {
        border-bottom: 5px solid #f6f7f9;
        padding: 20px 23px;
        font-size: 12px;
    }

    .es-form-item .item-inner:first-of-type {
        margin-top: 0;
    }

    .es-form-item .item-inner {
        margin-top: 8px;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .block {
        display: block !important;
    }

    .es-form-item.goods .button-img {
        padding: 0;
    }

    .button-img.active {
        border-color: #fb6638 !important;
    }

    .button-img.block {
        width: 100%;
        position: relative;
        min-height: 32px;
        height: auto;
        padding: 10px;
        text-align: left;
    }

    .button-img {
        width: 32px;
        height: 32px;
        margin-right: 20px;
        cursor: pointer;
        border-radius: 4px;
        line-height: 36px;
        text-align: center;
        border: 1px solid transparent;
        overflow: hidden;
    }

    .es-goods-header {
        background: #ffffff;
        line-height: 1;
        padding: 15px;

        .title {
            color: #333;
            font-weight: 600;
            font-size: 17px;
            margin-bottom: 5px;
        }

        .sub-title {
            font-size: 12px;
            color: #999;
        }

        .count-num {
            color: #333;
            font-size: 17px;
        }
    }

    .es-goods-group {
        height: auto;
        background: #ffffffff;
    }

    .es-goods-group.list {
        padding: 20px 0;
    }

    .es-goods-group.block.one .es-goods-item {
        float: none;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .es-goods-group.block .es-goods-item {
        width: 50%;
        float: left;
        border-bottom: 0;
        background: none;
        padding: 5px;
        display: block;
        border-radius: 2px;
    }
    .es-goods-group.block .es-goods-items {
        width: 33.3%;
        float: left;
        border-bottom: 0;
        background: none;
        padding: 5px;
        display: block;
        border-radius: 2px;
    }
    .es-goods-group.block .es-goods-items image{
        border-radius: 10px;
    }

    .es-goods-group.block .es-goods-item {
        border-radius: 4px;
    }

    .es-goods-item {
        position: relative;
        height: auto;
        padding: 14px;
        background: #fff;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .es-goods-group.block.one .es-goods-item .image {
        height: 175px;
        overflow: hidden;
    }

    .es-goods-group.block.one .es-goods-item .image>div:not(.qglist-i-t-bar) {
        height: 175px;
        background-size: cover;
        background-position: 50%;
    }

    .es-goods-group.block .es-goods-item .image {
        float: none;
    }

    .es-goods-group.block .es-goods-item .image {
        width: 100%;
        height: auto;
        margin: 0;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .es-goods-item .image {
        float: left;
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        background-position: 50%;

        &.display-2 {
            width: 100px;
            height: 100px;
        }
    }

    .es-goods-group.block {
        .es-goods-item .image {
            .img {
                height: 100%;
                width: 100%;
                max-width: 100%;
                max-height: 100%;
                display: block;
            }

            &.display-3 {
                img {
                    width: 176.5px;
                    height: 176.5px;
                    object-fit: cover;
                    border-radius: 10px;
                    display: block;
                }
            }

            &.display-5 {
                img {
                    width: 176.5px;
                    height: 120.5px;
                    object-fit: cover;
                    border-radius: 10px;
                    display: block;
                }
            }
        }
    }

    .button-img.block img {
        max-width: 100%;
        max-height: 100%;
        display: block;
    }

    .es-goods-item .image img {
        height: 100%;
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        display: block;
    }

    .button-img img {
        max-width: 30px;
        max-height: 30px;
    }

    .es-goods-group.block .es-goods-item .detail {
        padding: 8px;
        overflow: hidden;
        line-height: 1.5;

        &.display-3 {
            padding: 0;
        }
    }

    .es-goods-item .detail {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        line-height: 1.5;
        background: #fff;
        padding-left: 10px;
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    .es-goods-group .es-goods-item .detail .name {
        font-size: 15px;
        color: #3d404d;
        line-height: 1;
    }

    .es-goods-group .es-goods-item .detail .name {
        margin-top: 6px;
        font-size: 14px;

        &.display-1 {
            line-height: 24px;
            font-size: 16px;
            margin-top: 10px;

            .icon-tip {
                height: 24px;
                line-height: 24px;
                font-size: 12px;
                font-style: normal;
                margin-right: 5px;
                padding: 0 9px;
                background-color: #ffd93f;
                border-radius: 2px;
                display: inline-block;
            }
        }

        &.display-3 {
            line-height: 18px;
            margin-top: 10px;
            height: 35px;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            white-space: normal;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }

    .line-hide,
    .two-line-hide {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .line-hide {
        white-space: nowrap;
    }

    .es-goods-group .es-goods-item .detail .subtitle {
        font-size: 12px;
        color: #999ca7;
        height: 18px;
        margin: 6px 0 4px;
    }

    .line-hide,
    .two-line-hide {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .line-hide {
        white-space: nowrap;
    }

    .es-goods-item .detail .price {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 14px;
    }

    .es-goods-item .detail .price .text {
        color: #f55;
        font-weight: 700;
        font-size: 13px;
    }

    .es-goods-item .detail .price .text span {
        font-size: 16px;
    }

    .es-goods-group.block .es-goods-item .detail .productprice {
        height: 24px;
        line-height: 24px;
    }

    .es-goods-item .detail .price .productprice {
        text-decoration: line-through;
    }

    .es-goods-group .es-goods-item .detail .productprice {
        width: 100%;
        color: #999;
        font-size: 11px;
        overflow: hidden;
    }

    .es-goods-item .detail .price .productprice {
        color: #999;
        font-size: 12px;
    }

    .es-goods-group .es-goods-item .detail .sold {
        color: #999;
    }

    .es-goods-item .detail .sold {
        font-size: 11px;
        color: #999;
    }

    .es-goods-item .detail .buy.buybtn1 {
        border: 1px solid #f55;
        background: #f55;

        &.display-1,
        &.display-2 {
            width: 72px;
            height: 28px;
            line-height: 28px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            font-weight: normal;
            margin: 0;
            background-color: #ff4040;
            border-radius: 4px;
        }
    }

    .es-goods-item .detail .buy {
        display: inline-block;
        height: 20px;
        color: #fff;
        line-height: 20px;
        padding: 0;
        width: 32px;
        border-radius: 2px;
        text-align: center;
        border: 1px solid transparent;
        float: right;
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end;
    }

    .es-goods-item .el-checkbox+.el-checkbox {
        margin-left: 10px;
    }

    .my-link-input .el-input__inner {
        border: none;
        height: 32px;
        background: #e8effc;
    }

    .es-goods-group.block.three2 {
        width: 9999px;
    }

    .es-goods-group.block.two.swiper {
        white-space: nowrap;
        overflow: hidden;
        vertical-align: middle;

        .es-goods-item {
            display: inline-block;
            float: none !important;
            width: 45%;
            vertical-align: middle;

            .display-3 img {
                width: 157.8px;
                height: 157.8px;
            }

            .display-5 img {
                width: 157.8px;
                height: 110px;
            }
        }
    }

    .es-goods-group.block.three2 .es-goods-item {
        width: 100px;
    }

    .es-goods-group.block.three2 .es-goods-item img {
        height: 90px;
    }

    .es-goods-group.block.three2 .es-goods-item .price .text span {
        font-size: 12px;
    }

    .qglist-i-t-bar {
        line-height: 36px;
        background: -webkit-linear-gradient(90deg, #ff7e42, #fb2f52);
        background: linear-gradient(90deg, #ff7e42, #fb2f52);
        border-radius: 70px 0 0 70px;
        box-sizing: initial;
        position: absolute;
        top: -36px;
        padding-top: 36px;
        right: 0;

        .qglist-i-t-bar-d {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;

            .qglist-i-t-bar-l {
                color: #fff;
                font-size: 14px;
                padding: 0 20px 0 15px;

                .qglist-i-t-bar-l .i {
                    font-size: 16px;
                    vertical-align: -1px;
                    margin-right: 4px;
                    display: inline;
                }

                .qglist-i-t-bar-l .em {
                    font-style: normal;
                    font-weight: 600;
                    display: inline;
                }
            }

            .qglist-i-t-bar-r {
                padding: 5.4px 10px 5.4px 0;
            }
        }
    }
}
</style>
